<template>
  <div class="app-container app-container-next app-container-detail">
    <div slot="header" class="back">
      <router-link :to="{name: 'price-reduce-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <el-card class="box-card site" shadow="false">
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-form ref="settingForm" :model="price" :rules="rules">
            <h4 class="rebate-label">信用卡支付优惠</h4>
            <el-form-item label="是否启用：" prop="enable">
              <el-switch
                  v-model="price.enable">
              </el-switch>
            </el-form-item>
            <el-form-item label="优惠金额：" prop="discountAmount">
              <el-input-number
                  v-model="price.discountAmount"
                  :clearable="true"
                  :controls="false"
                  :precision="2"
                  :min="0"
              />
            </el-form-item>
            <el-form-item label="提示信息：" prop="text">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  placeholder="请输入提示信息"
                  v-model="price.text"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import {creditDiscount, getCreditDiscount} from '@/api/priceReduce';
import {divisionPrice, mclPrice} from '@/utils/utils';

export default {
    name: 'credit-discount-add',
    data () {
        return {
            submitLoading: false,
            price: {
                enable: false,
                discountAmount: 0,
                text: ''
            },
            rules: {
                discountAmount: [
                    {required: true, message: '请输入金额', trigger: 'blur'}
                ],
                text: [
                    {required: true, message: '请输入提示信息', trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        getCreditDiscount () {
            getCreditDiscount(this.siteId).then((res) => {
                if (res.data) {
                    const {discountAmount, ...other} = res.data;
                    this.price = Object.assign(this.price, {
                        ...other,
                        discountAmount: discountAmount / 100
                    });
                }
            });
        },
        handleSubmit () {
            this.$refs.settingForm.validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    let params = {
                        enable: this.price.enable,
                        siteId: this.siteId,
                        discountAmount: this.price.discountAmount * 100,
                        text: this.price.text
                    };
                    if (this.price.id) {
                        params.id = this.price.id;
                    }
                    creditDiscount(params).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('保存成功');
                            this.$router.push({name: 'price-reduce-list'});
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        }
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    mounted () {
        this.getCreditDiscount();
    }
};
</script>

<style scoped lang="scss">
.no-down {
  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-select-dropdown {
    display: none;
  }
}
</style>
